import { innerUrls } from '@/shared/constants';
import { Button, ButtonVariants, Container, Wrapper } from '@/shared/ui';
import { Footer } from '@/widgets/Footer';
import { Header } from '@/widgets/Header';
import Image from 'next/image';

import Code from './503.png';
import cs from './NoAccess.module.scss';

export const NoAccess = () => (
  <div className={cs.wrapper}>
    <Header />
    <div className={cs.bg} />
    <Wrapper>
      <Container className={cs.content} small>
        <div className={cs.img}>
          <Image alt="503" draggable={false} fill src={Code} />
        </div>
        <span className={cs.descr}>
          Сервис временно недоступен.
          <br />
          Мы уже знаем о проблеме и скоро все поправим.
        </span>
        <Button
          className={cs.btn}
          data-testid="link-main"
          href={innerUrls.main}
          link
          target="_self"
          variant={ButtonVariants.Main}
        >
          Главная
        </Button>
      </Container>
    </Wrapper>
    <Footer />
  </div>
);
